<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 1024 1024"
    preserveAspectRatio="xMidYMid meet"
    fill=""
    role="presentation"
    ref="host"
  >
    <g><path fill="currentColor" d="M740.717 1024H211.163A211.543 211.543 0 0 1 0 812.837V283.283A211.416 211.416 0 0 1 211.163 72.12h240.822a12.675 12.675 0 0 1 0 25.35H211.163A186.067 186.067 0 0 0 25.35 283.282v529.554A186.067 186.067 0 0 0 211.163 998.65h529.554a186.067 186.067 0 0 0 185.814-185.813V548.06a12.675 12.675 0 0 1 25.35 0v264.777A211.416 211.416 0 0 1 740.716 1024z"/><path fill="#0389FF" d="m577.212 651.994 422.326-422.326a63.374 63.374 0 0 0 0-88.724L889.9 31.054a63.374 63.374 0 0 0-88.724 0L378.597 453.505z"/><path fill="#FFFFFE" d="M577.212 669.992 360.726 453.506 791.67 22.56a76.049 76.049 0 0 1 106.722 0l109.764 109.764a76.049 76.049 0 0 1 0 106.722zM396.596 453.506l180.616 180.236 413.453-413.073a50.066 50.066 0 0 0 0-70.852L880.901 40.052a50.7 50.7 0 0 0-70.852 0z"/><path fill="#0389FF" d="M566.692 660.105H368.077V461.491"/><path fill="#FFFFFE" d="M566.692 672.78H354.895V461.49a12.675 12.675 0 0 1 25.35 0v185.94h186.447a12.675 12.675 0 0 1 0 25.35z"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class IconReportissue extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
